<template>
    <div class="tabbar">
     <router-link
     tag="span"
     class="tabbar-body"
     v-for="link of links"
     :key="link.name"
     :to="{name: link.name}">
       <mt-badge type="error" size="small" v-if="link.name==='Cart' && Alltotal !==0" v-show='isshow'>{{Alltotal}}</mt-badge>
     <span class="icon" v-html="link.icon"></span>
     <span class="title" active>{{link.titile}}</span>
     </router-link>
    </div>
</template>

<script>
import {
  mapGetters
} from 'vuex'
import routes from '@/router/routes'
// console.log(routes)
export default {
  name: 'Tabbar',
  data () {
    return {
      links: routes.filter(route => route.isNav===true),
      isshow: true
    }
  },
  computed:{
    ...mapGetters(['Alltotal'])
  },
  watch:{
    
  }
}
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'iconfont';  /* project id 931487 */
  src: url('//at.alicdn.com/t/font_931487_1cl2iw8q1vx.eot');
  src: url('//at.alicdn.com/t/font_931487_1cl2iw8q1vx.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_931487_1cl2iw8q1vx.woff') format('woff'),
  url('//at.alicdn.com/t/font_931487_1cl2iw8q1vx.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_931487_1cl2iw8q1vx.svg#iconfont') format('svg');
}
 .tabbar{
     display: flex;
     &-body {
       flex:1;
       text-align: center;  
       color:#666666;
     
     .icon {
       height: 35px;
       display: block;
       font-family: 'iconfont';
       font-size: 1.5rem;
       line-height: 35px;
     }
     .titile {
       line-height: 20px;
       font-size: 12px;
     }

     &.router-link-exact-active, 
     &.router-link-active{
       color: #ff0080;
     }
    } 
    .mint-badge{
          position: absolute;
    }
 }
</style>
